<template>
  <div class="articlecategory-container">
    <!-- 添加区域 -->
    <div class="add-container">
      <el-input
        placeholder="请输入要添加的分类名称，左边选择该分类等级"
        v-model="articleLeveParams.name"
      >
        <template slot="prepend">
          <el-dropdown
            placement="bottom"
            @visible-change="isDropdown = $event"
            @command="handleCommand"
          >
            <span class="el-dropdown-link">
              <span>{{ articleLevel[articleLeveParams.order - 1] }}</span>
              <i
                :class="[
                  isDropdown ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
                  'el-icon--right',
                ]"
              ></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="(level, index) in articleLevel"
                :key="index + 1"
                :command="index + 1"
                >{{ level }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <template slot="suffix">
          <div class="show-error-container" v-if="!articleLeveParams.name">
            <el-tag type="danger">必填</el-tag>
          </div>
        </template>
      </el-input>
      <el-button type="primary" @click="handlerAddArticleCategory"
        >添加</el-button
      >
    </div>
    <!-- 分类列表 -->
    <el-table :data="articleCategoryList" style="width: 100%" border>
      <el-table-column type="index" label="序号" width="50" align="center">
      </el-table-column>
      <el-table-column prop="date" label="文章等级" align="center">
        <template slot-scope="scope">
          {{ articleLevel[scope.row.order - 1] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="文章类别"
        align="center"
      ></el-table-column>
      <el-table-column label="文章数量" align="center">
        <template slot-scope="scope">
          <b>{{ scope.row.articleCount || 0 }}</b> 篇文章
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handlerEdit(scope.row)"
            >编辑</el-button
          >
          <el-button type="danger" size="mini" @click="handlerDelete(scope.row)"
            >删除</el-button
          ></template
        ></el-table-column
      >
    </el-table>

    <!-- 编辑弹出层 -->
    <el-dialog
      title="编辑分类信息"
      width="40%"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
    >
      <el-form :model="articleCategoryEdit">
        <el-form-item label="分类名称">
          <el-input
            v-model="articleCategoryEdit.name"
            autocomplete="off"
            placeholder="请输入要添加的分类名称，左边选择该分类等级"
          >
            <template slot="suffix">
              <div
                class="show-error-container"
                v-if="!articleCategoryEdit.name"
              >
                <el-tag type="danger">必填</el-tag>
              </div>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="分类等级">
          <el-select v-model="articleCategoryEdit.order">
            <el-option
              v-for="(level, index) in articleLevel"
              :key="index + 1"
              :label="level"
              :value="index + 1"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handlerEditCategory">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getArticleCategoryAPI,
  addArticleCategoryAPI,
  deleteArticleCategoryAPI,
  updateArticleCategoryAPI,
} from "@/api/article";
import { MessageBox } from "element-ui";
export default {
  name: "ArticleCategory",
  data() {
    return {
      articleLevel: [
        "一级分类",
        "二级分类",
        "三级分类",
        "四级分类",
        "五级分类",
        "六级分类",
      ],
      dialogFormVisible: false,
      articleCategoryList: [],
      articleCategoryEdit: {
        id: "",
        name: "",
        order: 1,
      },
      articleLeveParams: {
        name: "",
        order: 1,
      },
      isDropdown: false,
    };
  },
  created() {
    this.getArticleCategory();
  },
  methods: {
    async handlerAddArticleCategory() {
      if (!this.articleLeveParams.name) {
        return this.$message.warning("请输入分类名称");
      }
      const res = await addArticleCategoryAPI(this.articleLeveParams);
      if (typeof res !== "string") {
        this.articleLeveParams.name = "";
        this.articleLeveParams.order = 1;
        this.$message.success(
          `成功将 ${res.data.name} 添加为 ${
            this.articleLevel[res.data.order - 1]
          }`
        );
        this.getArticleCategory();
      } else {
        const { msg } = JSON.parse(res);
        this.$message.error(msg);
      }
    },
    async handlerEditCategory() {
      if (!this.articleCategoryEdit.name) {
        return this.$message.warning("请输入分类名称");
      }
      const res = await updateArticleCategoryAPI(this.articleCategoryEdit);
      if (typeof res !== "string") {
        this.articleCategoryEdit.name = "";
        this.articleCategoryEdit.order = 1;
        this.articleCategoryEdit.id = "";
        this.$message.success(`${res.data.name} 分类信息已更改成功！`);
        this.dialogFormVisible = false;
        this.getArticleCategory();
      } else {
        const { msg } = JSON.parse(res);
        this.$message.error(msg);
      }
    },
    handlerEdit(row) {
      this.dialogFormVisible = true;
      this.articleCategoryEdit.id = row.id;
      this.articleCategoryEdit.name = row.name;
      this.articleCategoryEdit.order = row.order;
    },
    handlerDelete(row) {
      let deleteMsg = `确认删除 ${row.name} 分类吗？`;
      if (row.articleCount > 0) {
        deleteMsg = `${row.name} 分类下有 ${row.articleCount} 篇文章，删除后文章分类将变为"未分类"，是否继续？`;
      }
      MessageBox.confirm(deleteMsg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const res = await deleteArticleCategoryAPI(row.id);
          if (typeof res !== "string") {
            this.$message.success(`成功删除 ${row.name} 分类`);
            this.getArticleCategory();
          } else {
            const { msg } = JSON.parse(res);
            this.$message.error(msg);
          }
        })
        .catch(() => {});
    },
    async getArticleCategory() {
      const res = await getArticleCategoryAPI();
      if (typeof res !== "string") {
        this.articleCategoryList = res.data || [];
      } else {
        const { msg } = JSON.parse(res);
        this.$message.error(msg);
      }
    },
    handleCommand(command) {
      this.articleLeveParams.order = command;
      this.orderSelectText = this.articleLevel[command - 1];
    },
  },
};
</script>

<style scoped lang="scss">
.articlecategory-container {
  padding: 10px;
  .add-container {
    width: 70%;
    display: flex;
    margin-bottom: 10px;
    .el-button {
      margin-left: 10px;
    }
  }
}
.show-error-container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
